<template>
    <div class="ma-content-block lg:flex justify-between p-4">
        <div class="app-container">
            <div class="container-header">
                <div class="container-header-tr">
                    <div>
                        <span class="s1">{{ $t('basics.status') }}</span>
                        <a-select
                            style="width: 120px"
                            class="mr20"
                            v-model="form.is_online"
                            :placeholder="$t('basics.textStatus')"
                        >
                            <a-option
                                :label="$t('basics.online')"
                                :value="1"
                            ></a-option>
                            <a-option
                                :label="$t('basics.liveline')"
                                :value="0"
                            ></a-option>
                        </a-select>
                        <a-button
                            class="ml20 mr20"
                            type="primary"
                            @click="searchButton"
                        >
                            <icon-search class="mr6" />
                            {{ $t('basics.search') }}
                        </a-button>
                        <a-button type="secondary" @click="resetButton">
                            <icon-refresh class="mr6" />
                            {{ $t('basics.reset') }}
                        </a-button>
                    </div>
                </div>
            </div>
            <!-- <div class="container-header mt10 mb10">
                <div class="container-header-tr">
                    <div>
                        <a-button
                            type="primary"
                            status="danger"
                            @click="deleteAcc(0)"
                        >
                            <icon-delete class="mr6" />
                            {{ $t('basics.delete') }}
                        </a-button>
                    </div>
                </div>
            </div> -->
            <div class="container-content">
                <div class="container-content-table">
                    <a-table
                        :stripe="true"
                        :columns="tableModel.columns"
                        :data="tableModel.list"
                        :loading="tableModel.loading"
                        :row-selection="tableModel.rowSelection"
                        v-model:selectedKeys="tableModel.selectedKeys"
                        row-key="id"
                        @selection-change="getRowData"
                        :pagination="false"
                    >
                        <template #system_phonenumber="{ record }">
                            <div style="display: flex; align-items: center">
                                {{ record.system_phonenumber }}
                                <a-tooltip
                                    v-if="record.too_many_times_failed == 1"
                                    :content="$t('basics.numberTips')"
                                    position="top"
                                >
                                    <icon-exclamation-circle-fill
                                        :size="18"
                                        style="
                                            color: red;
                                            cursor: pointer;
                                            margin-left: 6px;
                                        "
                                    />
                                </a-tooltip>
                            </div>
                        </template>
                        <template #is_online="{ record }">
                            <div>
                                <a-button
                                    v-if="record.is_online"
                                    style="color: #00b42a; font-size: 14px"
                                    type="text"
                                    status="success"
                                    >{{ $t('basics.online') }}</a-button
                                >
                                <a-button
                                    v-else
                                    style="color: #f53f3f; font-size: 14px"
                                    type="text"
                                    status="danger"
                                    >{{ $t('basics.liveline') }}</a-button
                                >
                            </div>
                        </template>
                        <!-- <template #can_send="{ record }">
                            <div>
                                <a-popconfirm
                                    @ok="statusChange(record)"
                                    :content="
                                        $t('basics.confirmEdit') +
                                        (record.can_send == 1
                                            ? $t('basics.offTxt')
                                            : $t('basics.openTxt')) +
                                        $t('basics.whatTxt')
                                    "
                                >
                                    <a-switch
                                        :beforeChange="handleChangeIntercept"
                                        v-model="record.can_send"
                                        :checked-value="1"
                                        :unchecked-value="0"
                                    />
                                </a-popconfirm>
                            </div>
                        </template> -->
                        <template #created_at="{ record }">
                            <div>
                                {{
                                    record.created_at
                                        ? $common.formatDate(
                                              new Date(record.created_at),
                                              'yyyy-mm-dd'
                                          )
                                        : ''
                                }}
                            </div>
                        </template>

                        <template #bind_time="{ record }">
                            <div v-if="record.bind_time">
                                {{
                                    $common.formatDate(
                                        new Date(record.bind_time * 1000)
                                    )
                                }}
                            </div>
                        </template>
                        <!-- <template #day="{ record }">
                            <div>
                                {{
                                    parseInt(
                                        (Number(new Date()) -
                                            Number(
                                                new Date(record.created_at)
                                            )) /
                                            1000 /
                                            60 /
                                            60 /
                                            24
                                    )
                                }}
                            </div>
                        </template> -->
                        <template #last_send_time="{ record }">
                            <div>
                                {{
                                    record.last_send_time
                                        ? $common.formatDate(
                                              new Date(
                                                  record.last_send_time * 1000
                                              )
                                          )
                                        : ''
                                }}
                            </div>
                        </template>
                        <template #last_online_time="{ record }">
                            <div>
                                {{
                                    record.last_online_time
                                        ? $common.formatDate(
                                              new Date(
                                                  record.last_online_time * 1000
                                              )
                                          )
                                        : ''
                                }}
                            </div>
                        </template>
                        <template #status="{ record }">
                            <div>
                                <a-button
                                    v-if="record.status === 1"
                                    type="text"
                                    status="success"
                                    >{{ $t('basics.zhengchang') }}</a-button
                                >
                                <a-button v-else type="text" status="danger">{{
                                    $t('basics.disabledTxt')
                                }}</a-button>
                            </div>
                        </template>
                    </a-table>
                    <div
                        class="_crud-footer mt-3 text-right"
                        ref="crudFooterRef"
                    >
                        <a-pagination
                            :total="tableModel.total"
                            show-total
                            show-jumper
                            show-page-size
                            @page-size-change="getList"
                            @change="getList"
                            v-model:current="tableModel.page"
                            :page-size-options="[10, 20, 50, 100]"
                            :default-page-size="100"
                            v-model:page-size="tableModel.pageSize"
                            style="display: inline-flex"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import { useI18n } from 'vue-i18n';
import { $request } from '@/utils/request.js';
import { useUserStore } from '@/store';
const user = useUserStore().user;
const { t } = useI18n();
const checkedList = ref([]);
const { proxy } = getCurrentInstance();
const tableModel = reactive({
    loading: true,
    columns: [
        {
            title: t('basics.phoneNumberTxt'),
            dataIndex: 'system_phonenumber',
            slotName: 'system_phonenumber',
            width: 200
        },
        // {
        //     title: t('basics.activationTime'),
        //     dataIndex: 'created_at',
        //     slotName: 'created_at'
        // },
        // {
        //     title: t('basics.bindTime'),
        //     dataIndex: 'bind_time',
        //     slotName: 'bind_time'
        // },
        {
            title: t('basics.availableMinutes'),
            dataIndex: 'can_use_minutes',
            slotName: 'can_use_minutes'
        },
        {
            title: t('basics.all_con'),
            dataIndex: 'all_con'
        },
        // {
        //     title: t('basics.numberOfConversations'),
        //     dataIndex: 'num_of_con'
        // },
        // {
        //     title: t('basics.sendOrNot'),
        //     dataIndex: 'can_send',
        //     slotName: 'can_send'
        // },
        {
            title: t('basics.is_online'),
            dataIndex: 'is_online',
            slotName: 'is_online'
        }
    ],
    selectedKeys: [],
    rowSelection: {
        type: 'checkbox',
        showCheckedAll: true,
        onlyCurrent: false
    },
    list: [],
    page: 1,
    total: 0,
    pageSize: 20
});

const form = reactive({});

// 获取选择列
const getRowData = (selectedRowKeys) => {
    checkedList.value = selectedRowKeys;
    console.log(checkedList.value);
};

const searchButton = async () => {
    tableModel.loading = true;
    tableModel.selectedKeys = [];
    tableModel.page = 1;
    tableModel.pageSize = 20;
    await getList();
    tableModel.loading = false;
};

const resetButton = async () => {
    tableModel.loading = true;
    tableModel.selectedKeys = [];
    tableModel.page = 1;
    tableModel.pageSize = 20;
    form.is_online = null;
    await getList();
    tableModel.loading = false;
};
// 删除
const deleteAcc = () => {
    if (!tableModel.selectedKeys.length) {
        proxy.$message.error(t('basics.deleteTips'));
        return;
    }
    proxy.$modal.warning({
        title: t('basics.xitongtishi'),
        content: t('basics.deleteContent'),
        hideCancel: false,
        cancelText: t('basics.concel'),
        okText: t('basics.sure'),
        simple: false,
        onOk: () => {
            console.log(tableModel.selectedKeys);
            let arr = [];
            for (let i in tableModel.selectedKeys) {
                arr.push(
                    ...tableModel.list.filter(
                        (n) => n.id === tableModel.selectedKeys[i]
                    )
                );
            }
            console.log(arr);
            arr = arr.map((n) => n.system_phonenumber);

            $request
                .post('/TcardClient/tphonenumberDetail/delete', {
                    user_id: user.id,
                    system_phonenumber_array: arr
                })
                .then((res) => {
                    searchButton();
                    proxy.$message.success(t('basics.deleteSuccess'));
                });
        }
    });
};

// 获取列表数据
const getList = async () => {
    let params = {
        page: tableModel.page,
        pageSize: tableModel.pageSize,
        user_id: user.id,
        is_online: form.is_online
    };
    let { items, pageInfo } = await $request.get(
        '/TcardClient/tphonenumberDetail/getList',
        params
    );
    tableModel.list = items;
    tableModel.total = pageInfo.total;
};

/**开关-确认 */
// const statusChange = async (row) => {
//     // row.status = Number(!row.status);
//     let data = {
//         system_phonenumber: row.system_phonenumber,
//         can_send: Number(!row.can_send)
//     };
//     await $request.post('/TcardManage/phonenumberDetail/updateCanSend', data);
//     proxy.$message.success(t('basics.successTxt'));
//     getList();
// };
// const handleChangeIntercept = async (newValue) => {
//     return false;
// };

const getPageInfo = async () => {
    tableModel.loading = true;
    await getList();
    tableModel.loading = false;
};
getPageInfo();
</script>
<style lang="less" scoped>
@import url('@/style/layout.less');
</style>
